<script setup >
const menuList = [
  {
    name: '新闻动态',
    icon: 'dynamics',
    path: '/news/dynamics'
  },
  {
    name: '声明公告',
    icon: 'announcements',
    path: '/news/announcements'
  },
  {
    name: '重要活动',
    icon: 'events',
    path: '/news/events'
  },
]


const activeTab = ref('/events/dynamics')
const router = useRouter()
// 切换tab
function changeTab(item) {
  router.replace({
    path: item.path
  })
}
onBeforeRouteUpdate(( to, from,next )=>{
  if(to.path.includes('/news') && !to.path.includes("detail")) {
    console.log('onBeforeRouteUpdate',to , from)
    activeTab.value = to.path
  }
  next()
})
onMounted( () => {
  console.log('onMounted')
  const route = useRoute()
  activeTab.value = route.path
})
onActivated(()=>{
  console.log('onActivated')
  const route = useRoute()
  activeTab.value = route.path
})
const  activeTabName = computed(() => {
  let res =  menuList.find(item =>{
    return   item.path === activeTab.value
  })
  if(res) return res.name
})
</script>

<template>
  <div class="title">
    <div class="text">
      新闻中心
    </div>
  </div>
  <div class="content px-300px py-20px bg-#f5f5f5 flex overflow-hidden">
      <div class="left mr-20px">
        <div class="h-21px mb-20px"></div>
        <div
          v-for="(item, index) in menuList"
          class="menu-item mb-20px flex"
          :class="{active: activeTab === item.path}"
          @click="changeTab(item)"
        >
          <svg-icon name="contact" ></svg-icon>
          <div class="menu-item-text text-center">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="right flex-1 overflow-hidden min-w-200px">
        <div class="top">
          <!--面包屑导航-->
          <div class="breadcrumbs mb-20px text-#666666">
            首页 > 新闻中心 > {{activeTabName}}
          </div>
        </div>
        <div class="content-box rounded-10px overflow-hidden">
          <NuxtPage keepalive></NuxtPage>
        </div>
      </div>

  </div>
</template>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 652px;
  font-size: 130px;
  color: #B20000;
  background-image: url("/img/about/about.png");

  .text {
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  }
}
.menu-item {
  width: 188px;
  height: 60px;
  border-radius: 10px 10px 10px 10px;
  background: #ffffff;
  color: #7F0102;
  cursor: pointer;
  &.active {
    background: #7F0102;
    color: #ffffff;
  }
  .menu-item-text {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.grid-box {
  display: grid;
  grid-template-columns: auto 1fr; /* 创建n列，repeat(3, 1fr)  repeat用于重复生成 */
  grid-template-rows: auto auto; /* 行的高度 */
  gap: 20px; /* 在网格单元格之间添加间距 */
}
.content-box {
}
</style>